<template>
  <n-carousel show-arrow  dot-type="dot" class="carousel" autoplay>
<!--    <n-carousel-item>-->
<!--      <div class="carousel-item" >-->
<!--        <img class="slide-image" src="" alt="First slide">-->
<!--        <div class="carousel-caption-v1">&lt;!&ndash;class="carousel-caption"&ndash;&gt;-->
<!--          <h1>关注支持</h1>-->
<!--          <p>关注【API-Cloud】公众号每一个月即可收到新增接口信息</p>-->
<!--          <p>对于一些需要密钥的接口也可以获取相关密钥</p>-->
<!--          <p>您的关注就是对于本站最大的鼓励和支持，谢谢！</p>-->
<!--          <p><img alt="free-api" src="@/assets/image/qrcode.gif" class="qr-code"></p>-->
<!--        </div>-->
<!--      </div>-->
<!--    </n-carousel-item>-->
<!--    <n-carousel-item>-->

<!--      <div class="carousel-item" >-->
<!--        <img class="slide-image" src="" alt="First slide">-->
<!--        <div class="carousel-caption-v1">-->
<!--          <h1>关注支持</h1>-->
<!--          <p>关注【免费API】公众号每一个月即可收到新增接口信息</p>-->
<!--          <p>对于一些需要密钥的接口也可以获取相关密钥</p>-->
<!--          <p>您的关注就是对于本站最大的鼓励和支持，谢谢！</p>-->
<!--          <p><img alt="free-api" src="@/assets/image/qrcode.gif" class="qr-code"></p>-->
<!--        </div>-->
<!--      </div>-->
<!--    </n-carousel-item>-->
    <n-carousel-item>
      <div class="carousel-item">
        <img class="slide-image" src="" alt="Third slide">
        <div class="carousel-caption-v1">
          <h1>友情提醒</h1>
          <p>接口开放平台,为您收集免费的接口服务，以及一些智能科学实验室发布的sdk接口，每月更新新的接口</p>
          <p>有些接口来自第三方，在第三方注册就可以成为他们的会员，免费使用他们的部分接口</p>
          <p>本站所有需要填写key等相关密钥已经在后台处理，不需要填写</p>
          <p>本外站接口均会展示信息来源，然后在本站可以调试相关接口</p>
        </div>
      </div>
    </n-carousel-item>
    <n-carousel-item>
      <div class="carousel-item">
        <img class="slide-image" src="" alt="Second slide">
        <div class="carousel-caption-v1">
          <h1>免责声明</h1>
          <p>在法律允许的范围内，本网站在此声明,不承担用户或任何人士就使用或未能使用本网站所提供的信息或任何链接或项目所引致的任何直接、间接、附带、从属、特殊、惩罚性或惩戒性的损害赔偿（包括但不限于收益、预期利润的损失或失去的业务、未实现预期的节省）。</p>
          <p>本网站图片，文字，接口信息之类版权申明，皆来自于互联网，如果侵犯，请及时通知我们，本网站将在第一时间及时删除。</p>
          <p><a class="btn btn-lg btn-primary" href="/duty" role="button">查看详情</a></p>
        </div>
      </div>
    </n-carousel-item>



  </n-carousel>
</template>

<script>
import { NCarousel, NCarouselItem } from 'naive-ui';

export default {
  name: "Carousel",
  components: {
    NCarousel,
    NCarouselItem
  }
};
</script>

<style scoped>
.carousel {
  height: 500px;
  padding-top: 50px;
}
.carousel-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 500px;
  background-color: #777;
  color: white;
  text-align: center;
  position: relative;
}
.slide-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
}
.carousel-caption {
  position: relative;
  z-index: 1;
}
.qr-code {
  width: 120px;
  height: 120px;
}
/*
重写app.css里面的那个样式，解决文字显示不居中的问题
 */
.carousel-caption-v1{
  color: white;
  font-size: 21px;
  font-weight: bold;
  line-height: 1.4;
  margin-bottom: 40px;
  z-index: 10;
}

</style>
